<section class="listSection">
  <div class="listNav">
    权限管理>角色列表
  </div>

  <section class="content selectContent first-content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect">
        <form #roleList="ngForm" (ngSubmit)="listMessage(roleList.value)" class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>角色名：</label>
              <input [(ngModel)]="roleName" name="roleName"type="text" class="form-control" placeholder="请输入角色名">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn" type="submit" >查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>角色状态：</label>
              <select class="form-control selectStyle" [(ngModel)]="roleStatus" name="roleStatus">
                <option value="">请选择角色状态</option>
                <option value="0">启用</option>
                <option value="1">停用</option>
              </select>
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA reset-btn" type="reset">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>角色列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal" (click)="add()">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>角色名称</th>
                <th>角色描述</th>
                <th>角色状态</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let role of list">
                <td>{{role.roleName}}</td>
                <td>{{role.roleDesc}}</td>
                <td>
                  <span *ngIf="role.roleStatus=='0'">启用</span>
                  <span *ngIf="role.roleStatus=='1'">停用</span>
                </td>
                <td>{{role.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>
                  <span>
                     <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(role)">查看</a>
                  </span>
                  <span>
                     <img src="assets/icon/edit.png" alt="编辑">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(role)">编辑</a>
                  </span>
                  <span>
                     <img src="assets/icon/delete.png" alt="删除">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="userMessage(role)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">角色详情</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>角色名：</td>
                  <td>{{queryMessage.roleName}}</td>
                </tr>
                <tr>
                  <td>角色状态：</td>
                  <td>
                    <span *ngIf="queryMessage.roleStatus=='0'">启用</span>
                    <span *ngIf="queryMessage.roleStatus=='1'">停用</span>
                  </td>
                </tr>
                <tr>
                  <td>角色描述：</td>
                  <td>{{queryMessage.roleDesc  }}</td>
                </tr>
                <tr>
                  <td>创建时间：</td>
                  <td>{{queryMessage.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                </tr>
                <tr>
                  <td>修改时间：</td>
                  <td>{{queryMessage.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- add -->
  <form #addRole="ngForm" (ngSubmit)="addMessage(addRole.value,addRole.valid)">
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">新增角色</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td><span class="red">*</span>角色名：</td>
                  <td><input type="text" [(ngModel)]="addMessages.roleName" class="form-control" name="roleName" required ></td>
                  <!--<td><div [hidden]="!addRole.form.hasError('required','roleName')" class="prompt">必填</div></td>-->
                </tr>
                <tr>
                  <td><span class="red">*</span>角色状态：</td>
                  <td>
                    <select [(ngModel)]="addMessages.roleStatus" class="form-control selectStyle" name="roleStatus" required>
                      <option value="0">启用</option>
                      <option value="1">停用</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><span class="red">*</span>角色描述：</td>
                  <td><input type="text" [(ngModel)]="addMessages.roleDesc" class="form-control" name="roleDesc" required></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn sumbit-btn" type="submit" [disabled]="!addRole.form.valid">提交</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- update -->
  <form #role="ngForm" (ngSubmit)="updateMessage(role.value,role.valid)">
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑角色</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <input type="text" [(ngModel)]="updateMessages.roleId" class="form-control hidden" name="roleId" value="{{updateMessages.roleId}}" >
                <tr>
                  <td><span class="red">*</span>角色名：</td>
                  <td><input type="text" class="form-control"[(ngModel)]="updateMessages.roleName" name="roleName" value="{{updateMessages.roleName}}" required></td>

                </tr>
                <tr>
                  <td><span class="red">*</span>角色状态：</td>
                  <td>
                    <select class="form-control selectStyle" [(ngModel)]="updateMessages.roleStatus" name="roleStatus" required>
                      <option value="0">启用</option>
                      <option value="1">停用</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><span class="red">*</span>角色描述：</td>
                  <td><input type="text" class="form-control" [(ngModel)]="updateMessages.roleDesc" name="roleDesc" value="{{roleDesc}}" required></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button  class="btn sumbit-btn" type="submit" [disabled]="!role.form.valid">提交</button>
          <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- delete -->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="deleteModalLabel">删除角色</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>是否删除该角色？</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn" data-name="{{queryMessage.roleId}}"  (click)="deleteById($event)">确定</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


